<!--
  * @description: 任务项组件，可用于显示包含按钮、提示气泡的任务项
  * @author: Ruan Jiazhen
  * @date: 2024-04-12  13:47:47
-->
<template>
  <div class="task-item invite-friend">
    <image class="icon-img" :src="taskInfo.icon" />
    <div class="task-name" :style="{ 'font-size': titleFontSize + 'rpx' }">
      {{ taskInfo.title }}
    </div>
    <div
      v-if="taskInfo?.bubbleContent"
      class="question-icon"
      @click.stop="openBubble"
    >
      <image class="img" src="@/static/icons/common/question.png" />
      <Bubble ref="bubble" position="top" :content="taskInfo.bubbleContent" />
    </div>
    <!-- 任务描述 -->
    <div class="desc">
      <span
        v-for="(item, index) in showDescList"
        :key="index"
        :class="{ highlight: item.isHighlight }"
        >{{ item.text }}</span
      >
    </div>
    <!-- 右侧按钮 -->
     <!-- 没有进入客服聊天的消息卡片按钮 -->
    <button
      class="right-btn"
      :class="btnDisabled ? 'disabled' : ''"
      :open-type="taskInfo?.openType"
      v-if="taskInfo?.btnText"

      @click="emits('clickBtn')"
    >
      {{ btnText }}
    </button>
  </div>
</template>

<script setup lang="ts">
import Bubble from "@/components/Bubble.vue";

const props = defineProps<{
  taskInfo: TaskInfo;
  btnDisabled?: boolean;
  btnText: string;
  titleFontSize: number;
}>();

/** 任务描述列表，对props.taskInfo.desc进行归一化处理 */
const showDescList = computed(() =>
  Array.isArray(props.taskInfo.desc)
    ? props.taskInfo.desc
    : [{ text: props.taskInfo.desc }]
);

const emits = defineEmits<{ (e: "clickBtn"): void }>();

const bubble = ref<InstanceType<typeof Bubble>>();

/** 打开气泡 */
const openBubble = () => {
  bubble.value?.open();
};

/**
 * 关闭气泡
 */
const closeBubble = () => {
  bubble.value?.close();
};

defineExpose({
  openBubble,
  closeBubble,
});
</script>

<style scoped lang="scss">
// 任务列表项
.task-item {
  position: relative;

  width: 100%;

  display: grid;
  grid-template:
    "icon name question-icon right" auto
    "icon desc desc right" 1fr
    / min-content max-content 1fr min-content;
  row-gap: 2px;
  column-gap: 8px;
  align-items: center;

  // 装饰用的分割线
  &:nth-child(n + 2) {
    &::before {
      position: absolute;
      top: -12px;
      left: 0;

      width: 87%;
      height: 1px;

      content: "";

      background: #f8f8f8;
      border-radius: 8px;
    }
  }

  // 任务图标
  .icon-img {
    grid-area: icon;

    width: 40px;
    height: 40px;
  }

  // 任务名称
  .task-name {
    grid-area: name;

    font-size: 17px;
    font-weight: 600;
    color: #333;
  }

  // 问号图标
  .question-icon {
    grid-area: question-icon;

    position: relative;

    width: 12px;
    height: 12px;

    .img {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }
  }

  // 任务描述
  .desc {
    grid-area: desc;

    width: 100%;

    font-size: 13px;
    line-height: 13px;
    color: #999;

    .highlight {
      color: $text-color--highlight;
    }
  }

  // 右侧按钮
  .right-btn {
    grid-area: right;

    $button-height: 32px;
    width: 77px;
    height: $button-height;

    background: $button-bg;
    border-radius: calc($button-height / 2);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    line-height: 15px;
    color: #fff;
    text-align: center;

    &.disabled {
      background: #ccc;
    }
  }
}
</style>
